<template>
    <div class="slides-creator">
        <a-card title="创建任务" type="inner" size="small">
            <a-form @submit="handleSubmit" :label-col="labelCol" style="max-width: 400px; margin-bottom: 20px;">

                <a-form-item label="标题" name="title" rules="required">
                    <a-input v-model:value="formData.topic" placeholder="请输入标题" />
                </a-form-item>
                <a-form-item label="关键字" name="keywords" rules="required">
                    <a-textarea v-model:value="formData.keywords" placeholder="请输入关键字" />
                </a-form-item>
                <a-form-item label="页数" name="pageCount" rules="required">

                    <a-input-number v-model:value="formData.pageCount" placeholder="页数" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit">提交</a-button>
                </a-form-item>
            </a-form>
        </a-card>

        <!-- <div v-if="status !== 'completed'">
            <p>任务状态：{{ status }}</p>
            <p>上次检查时间：{{ lastCheckTime }}</p>
        </div> -->

        <div>
            <a-card title="任务查询" type="inner" size="small" class="show-card">
                <div>
                    <a-input-search v-model:value="submissionId" @search="checkStatus"></a-input-search>
                </div>
                <div v-if="submissionData">
                    <div v-if="submissionData.status == 'ing'">PPT正在创作中...</div>
                    <div v-if="submissionData.status == 'done'">
                        <div class="output-item">
                            <FilePptTwoTone />
                            《{{ slidesTitle }}.pptx》<a-button @click="handlePressDownloadSlides">下载</a-button>
                        </div>

                        <div class="output-item">
                            <FilePdfTwoTone />
                            《{{ slidesTitle }}.pdf》<a-button @click="handlePressDownloadPdf">下载</a-button>
                        </div>

                    </div>
                </div>
            </a-card>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { FilePptTwoTone, FilePdfTwoTone } from '@ant-design/icons-vue';

interface SlidesFormData {
    topic: string,
    keywords: string,

}

interface AppSubmission {
    id: string,
    status: string | undefined,
    formData: string | undefined,
    answer: string | undefined,
}

const serverApi = 'https://lbm-helper-test.starringshop.com/jeecg-boot';

const formData = reactive({
    topic: '道路养护市场分析',
    keywords: '',
    pageCount: 5,
    isPro: false,
});

const submissionId = ref<string | undefined>(undefined)

const labelCol = { style: { width: '50px' } };

const status = ref('pending');
const lastCheckTime = ref('');
const submissionData = ref<AppSubmission | undefined>(undefined);
const handleSubmit = async () => {
    const params = {
        creatorCode: 'ppt',
        formData: formData
    }
    try {
        const response = await fetch(`${serverApi}/ai/submission/createSubmission`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        });

        if (response.ok) {
            const data = await response.json();
            //status.value = 'submitted';
            console.log('data = ', data);
            console.log('response = ', response);
            submissionData.value = data.result;
            submissionId.value = data.result.id;
            checkStatus();
        }
    } catch (error) {
        console.error('提交失败', error);
    }
}

const checkStatus = async () => {
    try {
        const response = await fetch(`${serverApi}/ai/submission/getResult?submissionId=${submissionId.value}`);
        if (response.ok) {
            const data = await response.json();
            status.value = data.status;

            submissionData.value = data.result;

            lastCheckTime.value = new Date().toLocaleTimeString();

            if (data.status !== 'error' || data.status !== 'done') {
                setTimeout(checkStatus, 3000); // 每隔3秒检查一次任务状态
            }
        }
    } catch (error) {
        console.error('检查任务状态失败', error);
    }
}

const slidesTitle = computed(() => {
    if (!submissionData.value) {
        return '';
    }

    const formDataString = submissionData.value.formData
    if (!formDataString) {
        return '';
    }

    const formData: SlidesFormData = JSON.parse(formDataString);
    return formData.topic;
})

const handlePressDownloadSlides = () => {
    if (!submissionData.value) {
        return;
    }

    window.location.href = `${serverApi}/ai/submission/pptx?submissionId=${submissionId.value}`;
}

const handlePressDownloadPdf = () => {
    if (!submissionData.value) {
        return;
    }

    window.location.href = `${serverApi}/ai/submission/pdf?submissionId=${submissionId.value}`;
}
</script>
  
<style lang="scss">
/* 根据需要添加样式 */
.slides-creator {
    .show-card {
        margin-top: 24px;
        ;
    }

    .output-item {
        border: 1px solid #cccccc;
        padding: 5px;
        margin: 10px 0px;
    }
}
</style>
  